<script setup lang="ts">
import { Position, Handle } from "@vue-flow/core"; // 导入 Position 类型
import { NodeToolbar } from "@vue-flow/node-toolbar";
import { IOUnitType } from "@/utils/serviceDict";
import { computed } from "vue"; // 添加 computed 导入

// props 类型定义
const props = defineProps({
  id: String,
  data: {
    type: Object,
    required: true,
    default: () => ({
      toolbarVisible: false,
      toolbarPosition: "top" as Position,
      output: "",
      label: "",
      consumption: "",
      unit: ""
    })
  }
});

// 根据 isEmission 计算显示的按钮
const actions = computed(() => {
  if (props.data.isEmission === 0) {
    return ["添加输出量", "查看详情"];
  }
  return ["删除"];
});

const unitLabel = computed(() => {
  return IOUnitType.find(unit => unit.value === props.data.unit)?.label || "";
});

// 发射事件
defineEmits(["toolbar-action"]);
const handleType = "output";
</script>
<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition as Position">
    <button v-for="action of actions" :key="action" type="button" @click="$emit('toolbar-action', action, props.id, handleType)">
      {{ action }}
    </button>
  </NodeToolbar>
  <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
    <div style="display: flex; align-items: center">
      <img v-if="data.output === 1" style="width: 20px; margin-right: 6px" src="@/assets/images/wastGas.svg" />
      <img v-if="data.output === 2" style="width: 20px; margin-right: 6px" src="@/assets/images/wasteWater.svg" />
      <img v-if="data.output === 3" style="width: 20px; margin-right: 6px" src="@/assets/images/solidWaste.svg" />
      {{ data.label }}
    </div>

    <div style="display: flex; align-items: center">
      <span v-if="data.isEmission === 0">{{ data.consumption }}</span>
      <span v-if="data.isEmission === 0" style="margin-left: 4px">{{ unitLabel }}</span>
    </div>
  </div>

  <Handle
    type="target"
    :position="Position.Left"
    id="left"
    style="width: 7px; height: 23px; background-color: #d4237a; border-radius: 4px"
  />
</template>
